<template>
	<view class="content">
		<view class="part1">
			<text v-text="todayStr"></text>
		</view>
		<view class="part2">
			<u-subsection fontSize="30" :list="chartTitleList" mode="button" :current="chartIndex" @change="chartChange"></u-subsection>
			<view v-if="chartIndex == 0">
				<view class="big-font-view" v-if="xinlvMean_day">
					平均心率
					<text class="big-font" :style="'color:'+((xinlvMean_day>100||xinlvMean_day<60)?'orange':'green')" v-text="xinlvMean_day"></text>次/分
				</view>
				<view class="big-font-view" v-else>暂无数据</view>
				<view class="part2-chart">
					<qiun-data-charts type="tline" :opts="opts_day" :chartData="chartData_day" tooltipFormat="xinlv_day" :animation="false" />
				</view>
			</view>
			<view v-else-if="chartIndex == 1">
				<view class="big-font-view" v-if="xinlvMean_week">
					平均心率
					<text class="big-font" :style="'color:'+((xinlvMean_week>100||xinlvMean_week<60)?'orange':'green')" v-text="xinlvMean_week"></text>次/分
				</view>
				<view class="big-font-view" v-else>
					暂无数据
				</view>
				<view class="part2-chart">
					<qiun-data-charts type="line" :opts="opts_week" :chartData="chartData_week" tooltipFormat="xinlv_week" :animation="false" />
				</view>
			</view>
			<view v-else-if="chartIndex == 2">
				<view class="big-font-view" v-if="xinlvMean_month">
					平均心率
					<text class="big-font" :style="'color:'+((xinlvMean_month>100||xinlvMean_month<60)?'orange':'green')" v-text="xinlvMean_month"></text>次/分
				</view>
				<view class="big-font-view" v-else>
					暂无数据
				</view>
				<view class="part2-chart">
					<qiun-data-charts type="line" :opts="opts_month" :chartData="chartData_month" tooltipFormat="xinlv_month" :animation="false" />
				</view>
			</view>
		</view>
		<view class="part3">
			<view>
				<u-icon v-if="chartIndex == 0" name="eye-fill" color="rgb(255, 102, 85)" size="80" label="今日概览"></u-icon>
				<u-icon v-if="chartIndex == 1" name="eye-fill" color="rgb(255, 102, 85)" size="80" label="本周概览"></u-icon>
				<u-icon v-if="chartIndex == 2" name="eye-fill" color="rgb(255, 102, 85)" size="80" label="本月概览"></u-icon>
			</view>
			<u-line margin="30rpx 0"></u-line>
			<view v-if="chartIndex == 0">
				<u-row>
					<u-col span="6">
						<view v-if="xinlvMean_day">
							<text class="semi-big-font" v-text="xinlvMean_day"></text>次/分
						</view>
						<view v-else>暂无数据</view>
						<view>
							<text class="info-font">平均心率</text>
						</view>
					</u-col>
				</u-row>
			</view>
			<view v-if="chartIndex == 1">
				<u-row>
					<u-col span="6">
						<view v-if="xinlvMean_week">
							<text class="semi-big-font" v-text="xinlvMean_week"></text>次/分
						</view>
						<view v-else>暂无数据</view>
						<view>
							<text class="info-font">平均心率</text>
						</view>
					</u-col>
				</u-row>
			</view>
			<view v-if="chartIndex == 2">
				<u-row>
					<u-col span="6">
						<view v-if="xinlvMean_month">
							<text class="semi-big-font" v-text="xinlvMean_month"></text>次/分
						</view>
						<view v-else>暂无数据</view>
						<view>
							<text class="info-font">平均心率</text>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xinlvMean_day: 0,
				xinlvMean_week: 0,
				xinlvMean_month: 0,
				todayStr: this.dateUtil.date2Str_Format1(new Date()),
				chartTitleList: ["日", "周", "月"],
				chartIndex: 0,
				opts_day: {
					// fontSize: 20,
					dataLabel: false,
					color: ["rgb(255, 102, 85)"],
					padding: [15, 20, 0, 0],
					dataPointShape: false,
					legend: {
						show: false
					},
					xAxis: {
						fontSize: 13,
						disableGrid: true,
						min: this.dateUtil.minTimeRange().getTime(),
						max: this.dateUtil.maxTimeRange().getTime(),
						format: "index_time_range"
					},
					yAxis: {
						data: [{
							fontSize: 13,
							min: 40,
							max: 100
						}]
					}
				},
				opts_week: {
					// fontSize: 20,
					dataLabel: false,
					color: ["rgb(255, 102, 85)"],
					padding: [15, 20, 0, 0],
					dataPointShape: false,
					legend: {
						show: false
					},
					xAxis: {
						fontSize: 13,
						disableGrid: true
					},
					yAxis: {
						data: [{
							fontSize: 13,
							min: 40,
							max: 100
						}]
					},
					extra: {
						line: {
							type: "curve"
						}
					}
				},
				opts_month: {
					// fontSize: 20,
					dataLabel: false,
					color: ["rgb(255, 102, 85)"],
					padding: [15, 20, 0, 0],
					dataPointShape: false,
					legend: {
						show: false
					},
					xAxis: {
						fontSize: 13,
						disableGrid: true,
						labelCount: 4
					},
					yAxis: {
						data: [{
							fontSize: 13,
							min: 40,
							max: 100
						}]
					},
					extra: {
						line: {
							type: "curve"
						}
					}
				},
				chartData_day: {},
				chartData_week: {},
				chartData_month: {}
			}
		},
		methods: {
			chartChange(index) {
				this.chartIndex = index
			},
		},
		mounted() {
			let token = uni.getStorageSync('token');
			if (!token) {
				return;
			}
			// 处理今日数据
			uni.$u.http.get(`${this.urlConfig.appServerPrefix}/heartrate/heartratelisthidetoday`, {
				header: {
					"token": token
				}
			}).then(res => {
				let xinlvList = [];
				if (res.data && res.data.extend.heartrateList) {
					xinlvList = res.data.extend.heartrateList;
				}
				let chartData_daySeries = new Array(xinlvList.length);
				let xinlvSum_day = 0;
				for (let i = 0; i < xinlvList.length; i++) {
					chartData_daySeries[i] = [this.dateUtil.str2date(xinlvList[i].timeBegin).getTime(), xinlvList[i].heartrate]
					xinlvSum_day += xinlvList[i].heartrate;
				}
				this.xinlvMean_day = Math.round(xinlvSum_day / xinlvList.length);
				let chartData_dayTemp = {
					series: [{
						name: "心率",
						data: chartData_daySeries
					}]
				}
				this.chartData_day = JSON.parse(JSON.stringify(chartData_dayTemp));
			}).catch(err => {
				console.log(err)
			});
			//周和月的数据
			uni.$u.http.get(`${this.urlConfig.appServerPrefix}/heartrate/heartratelistdayavg`, {
				header: {
					"token": token
				}
			}).then(res => {
				// 先转成map格式，方便查找对应的数据
				let date_xinlvMap = {};
				let xinlvList = [];
				if (res.data && res.data.extend.heartrateDayAvgList) {
					xinlvList = res.data.extend.heartrateDayAvgList;
				}
				for (let i = 0; i < xinlvList.length; i++) {
					date_xinlvMap[xinlvList[i].dayStr.slice(5)] = xinlvList[i].heartrate;
				}
				// 下面这一堆是为了生成x轴坐标
				// 先获得本周周一的date
				let t_today = new Date();
				let weekDate = this.dateUtil.getMonday(); //周一
				let monthDate = new Date(t_today.getFullYear(), t_today.getMonth(), 1);
				let weekStrArr = ["周一", "二", "三", "四", "五", "六", "周日"];
				let weekDataArr = new Array(7);
				let monthStrArr = new Array(new Date(t_today.getFullYear(), t_today.getMonth() + 1, 0).getDate());
				let monthDataArr = new Array(monthStrArr.length);
				// 生成标准格式的本周数据
				let xinlvSum_week = 0;
				let count_week = 0;
				for (var i = 0; i < weekStrArr.length; i++) {
					let weekDateStr = this.dateUtil.date2Str_Format3(weekDate)
					// weekStrArr[i] = weekDateStr;
					// t_data是当前日期的平均心率，下面是为了计算本周的平均心率
					let t_data = date_xinlvMap[weekDateStr];
					if (t_data) {
						xinlvSum_week += t_data;
						count_week++;
					}
					weekDataArr[i] = t_data;
					weekDate.setDate(weekDate.getDate() + 1);
				}
				this.xinlvMean_week = Math.round(xinlvSum_week / count_week);
				// 生成标准格式的本月数据
				let xinlvSum_month = 0;
				let count_month = 0;
				for (var i = 0; i < monthStrArr.length; i++) {
					let monthDateStr = this.dateUtil.date2Str_Format3(monthDate)
					monthStrArr[i] = monthDateStr;
					let t_data = date_xinlvMap[monthDateStr];
					if (t_data) {
						xinlvSum_month += t_data;
						count_month++;
					}
					monthDataArr[i] = t_data;
					monthDate.setDate(monthDate.getDate() + 1);
				}
				this.xinlvMean_month = Math.round(xinlvSum_month / count_month);

				let chartDataTemp_week = {
					categories: weekStrArr,
					series: [{
						name: "心率",
						data: weekDataArr,
						connectNulls: true
					}]
				}
				this.chartData_week = JSON.parse(JSON.stringify(chartDataTemp_week));
				let chartDataTemp_month = {
					categories: monthStrArr,
					series: [{
						name: "心率",
						data: monthDataArr,
						connectNulls: true
					}]
				}
				this.chartData_month = JSON.parse(JSON.stringify(chartDataTemp_month));
			}).catch(err => {
				console.log(err)
			})
		}
	}
</script>

<style lang="scss">
	.content {
		width: 710rpx;
		background-color: #FAFAFA;
		padding: 20rpx;
		height: calc(100vh - 40rpx);
	}

	.part1 {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.part3 {
		border-radius: 30rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		width: 650rpx;
		margin: 15rpx 0;
	}

	.big-font {
		margin-left: 50rpx;
		font-weight: 900;
	}

	.big-font-view {
		padding: 30rpx;
	}

	.part2-chart {
		width: 100%;
		height: 450rpx;
		padding: 20rpx 0;
	}

	.semi-big-font {
		font-size: 45rpx;
		font-weight: 600;
	}

	.info-font {
		font-size: 30rpx;
		color: #909399;
	}
</style>
